<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我自己做的：京东左侧导航栏</title>
    <!--重置样式-->
    <link  rel="stylesheet" href="../css.style/reset.css">
    <style rel="text/javascript">
        body{
            background-color:blueviolet;
        }
        ul{
            width:190px;
            height:450px;
            margin:10px;
            background-color:#fefefe;
            padding:10px 0;
            margin:50px auto;
        }
        li{
            /*width与父元素一样*/
            height:25px;
            padding-left:18px;
        }
        li:hover{/*我自己没有设置这个*/
            background-color: #d9d9d9;
        }
        a{
           
            /*设置字体大小*/
            font-size: 14px;
            /* font:12px/1.5 Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif; */
            /*去除下划线*/
            text-decoration: none;
            color:#333333;
        
        } 
        a:hover{
        
            color:red;
        }
        span{
            /* padding:0 2px; */
            font-size: 12px;
            color:#636363;
        }
    </style>
</head>
<body>
    <ul>
        <li>
            <a href="javascript:;">家用电器</a>
        </li>

        <li>
            <a href="javascript:;">手机</a>
            <span>/</span>
            <a href="javascript:;">运营商</a>
            <span>/</span>
            <a href="javascript:;">数码</a>
        </li>

        <li>
            <a href="javascript:;">电脑</a>
            <span>/</span>
            <a href="javascript:;">办公</a>
        </li>
        <li>
            <a href="javascript:;">家居</a>
            <span>/</span>
            <a href="javascript:;">家具 </a>
            <span>/</span>
            <a href="javascript:;"> 家装</a>
            <span>/</span>
            <a href="javascript:;">厨具</a>
        </li>

        <li>
            <a href="javascript:;">男装</a>
            <span>/</span>
            <a href="javascript:;">女装 </a>
            <span>/</span>
                
           
            <a href="javascript:;">童装</a>
            <span>/</span>
            <a href="javascript:;">内衣</a>  
        </li>

        <li>
            <a href="javascript:;">美妆</a>
            <span>/</span> 
            <a href="javascript:;">个护清洁</a>
            <span>/</span>
            <a href="javascript:;">宠物</a>   
        </li>
        <li>
            <a href="javascript:;">女鞋</a>
            <span>/</span>
            <a href="javascript:;">箱包</a>
            <span>/</span>    
            <a href="javascript:;">钟表</a>
            <span>/</span>
            <a href="javascript:;">珠宝</a>
               
            
        </li>
        <li>
            <a href="javascript:;">男鞋</a>
            <span>/</span>
            <a href="javascript:;">运动</a>
            <span>/</span>
            <a href="javascript:;">户外</a> 
        </li>
        <li>
            <a href="javascript:;">房产</a>
            <span>/</span>   
            <a href="javascript:;">汽车</a>
            <span>/</span>  
            <a href="javascript:;"> 汽车用品</a> 
        </li>
        <li>
            <a href="javascript:;">母婴</a>
            <span>/</span>   
            <a href="javascript:;">玩具乐器</a>
        </li>
        <li>
            <a href="javascript:;">食品</a>
            <span>/</span>
            <a href="javascript:;">酒类</a>    
            <span>/</span>
            <a href="javascript:;">生鲜</a>
            <span>/</span>
            <a href="javascript:;">特产</a>
        </li>
        <li>
            <a href="javascript:;">艺术</a>
            <span>/</span>  
            <a href="javascript:;">礼品鲜花</a>
            <span>/</span>
            <a href="javascript:;">农资绿植</a>
        </li>
        <li>
            <a href="javascript:;">医药保健</a>
            <span>/</span>
            <a href="javascript:;">计生情趣</a>
        </li>
        <li>
            <a href="javascript:;">图书</a>
            <span>/</span>
            <a href="javascript:;">文娱</a>
            <span>/</span>
            <a href="javascript:;">教育</a>
            <span>/</span>
            <a href="javascript:;">电子书</a>
        </li>
        <li>
            <a href="javascript:;">机票</a>
            <span>/</span>
            <a href="javascript:;">酒店</a>
            <span>/</span>
            <a href="javascript:;">旅行</a>
            <span>/</span>
            <a href="javascript:;">生活</a>
        </li>
        <li>
            <a href="javascript:;">众筹</a>
            <span>/</span>
            <a href="javascript:;">白条</a>
            <span>/</span>
            <a href="javascript:;">企业金融</a>  
        </li>
        <li>
            <a href="javascript:;">安装</a>
            <span>/</span>
            <a href="javascript:;">维修</a>
            <span>/</span>
            <a href="javascript:;">清洗</a>
            <span>/</span>
            <a href="javascript:;">二手</a>
        </li>
        <li>
            <a href="javascript:;">工业品</a>
        </li>
    </ul>
</body>
</html>